﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Grids - Data Binding</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="stylesheet" href="../../../css/samples.css" />
    <link rel="stylesheet" href="../../../css/integralui.css" />
    <link rel="stylesheet" href="../../../css/integralui.treegrid.css" />
    <link rel="stylesheet" href="../../../css/themes/theme-flat-blue.css" />
    <script type="text/javascript" src="../../../external/angular.min.js"></script>
    <script type="text/javascript" src="../../../js/angular.integralui.min.js"></script>
    <script type="text/javascript" src="../../../js/angular.integralui.lists.min.js"></script>
    <script type="text/javascript" src="../../../js/angular.integralui.treegrid.min.js"></script>
    <script type="text/javascript">
 		angular
			.module("appModule", ["integralui"])
			.controller("appCtrl", ["$scope", "IntegralUITreeGridService", "$timeout", function($scope, $gridService, $timeout){
				$scope.gridName = "gridSample";
				$scope.sampleRows = [];
				$scope.defaultIcon = "icons-medium empty-doc";

				$scope.sampleColumns = [
					{ id: 1, columnTitle: "Customer/Order ID", columnAlignment: "center", size: 180 },
					{ id: 2, columnTitle: "Ordered", columnAlignment: "center", cellAlignment: "center", size: 90 },
					{ id: 3, columnTitle: "Shipped", columnAlignment: "center", cellAlignment: "center", size: 90 },
					{ id: 4, columnTitle: "Ship Via", columnAlignment: "center", size: 125 },
					{ id: 5, columnTitle: "Freight", columnAlignment: "center", cellAlignment: "right", size: 80 },
					{ id: 6, columnTitle: "Address", columnAlignment: "center", size: 200 },
					{ id: 7, columnTitle: "City", columnAlignment: "center" },
					{ id: 8, columnTitle: "Country", columnAlignment: "center" }
				];

				$scope.flatData = [
					{ 
						rowID: 1,
						icon: "icons-medium people",
						rowText: "Piccolo und mehr",
						cells: [{ cid: 1, cellText: "Piccolo und mehr" }, { cid: 6, cellText: "Geislweg 14" }, { cid: 7, cellText: "Salzburg" }, { cid: 8, cellText: "Austria" }]
					},
					{ 
						rowID: 11,
						parentID: 1,
						rowText: "Order #10259",
						cells: [{ cid: 1, cellText: "10259" }, { cid: 2, cellText: "9/13/2012" }, { cid: 3, cellText: "9/27/2012" }, { cid: 4, cellText: "Federal Shipping" }, { cid: 5, cellText: "360.63" }]
					},
					{ 
						rowID: 12,
						parentID: 1,
						rowText: "Order #11094",
						cells: [{ cid: 1, cellText: "11094" }, { cid: 2, cellText: "1/20/2013" }, { cid: 3, cellText: "2/5/2013" }, { cid: 4, cellText: "Federal Shipping" }, { cid: 5, cellText: "200.14" }]
					},
					{ 
						rowID: 2,
						icon: "icons-medium people",
						rowText: "Frankenversand",
						cells: [{ cid: 1, cellText: "Frankenversand" }, { cid: 6, cellText: "Berliner Platz 43" }, { cid: 7, cellText: "München" }, { cid: 8, cellText: "Germany" }]
					},
					{ 
						rowID: 21,
						parentID: 2,
						rowText: "Order #11536",
						cells: [{ cid: 1, cellText: "11536" }, { cid: 2, cellText: "12/9/2013" }, { cid: 3, cellText: "1/7/2014" }, { cid: 4, cellText: "Speedy Express" }, { cid: 5, cellText: "85.53" } ]
					},
					{ 
						rowID: 22,
						parentID: 2,
						rowText: "Order #14472",
						cells: [{ cid: 1, cellText: "14472" }, { cid: 2, cellText: "11/14/2014" }, { cid: 3, cellText: "11/25/2014" }, { cid: 4, cellText: "Speedy Express" }, { cid: 5, cellText: "112.30" } ]
					},
					{ 
						rowID: 3,
						icon: "icons-medium people",
						rowText: "Laughing Bacchus Wine Cellars",
						cells: [{ cid: 1, cellText: "Laughing Bacchus Wine Cellars" }, { cid: 6, cellText: "1900 Oak St." }, { cid: 7, cellText: "Vancouver" }, { cid: 8, cellText: "Canada" }]
					},
					{ 
						rowID: 31,
						parentID: 3,
						rowText: "Order #11495",
						cells: [{ cid: 1, cellText: "11495" }, { cid: 2, cellText: "8/7/2013" }, { cid: 3, cellText: "9/20/2013" }, { cid: 4, cellText: "United Package" }, { cid: 5, cellText: "49.28" } ]
					}
				];

				$scope.dataFields = {
					column: {
						headerText: 'columnTitle',
						headerAlignment: 'columnAlignment',
						contentAlignment: 'cellAlignment',
						width: 'size'
					},
					row: {
						id: 'rowID',
						pid: 'parentID',
						text: 'rowText'
					},
					cell: {
						text: 'cellText'
					}
				}

				var loadTimer = $timeout(function(){
					$gridService.loadData($scope.gridName, $scope.flatData, null, $scope.dataFields, true);

					$timeout.cancel(loadTimer);
				}, 1);
			}]);
    </script>
    <style type="text/css">
		/* TreeGrid settings */
		.iui-treegrid-column-header-cell, .iui-treegrid-column-footer-cell
		{
			padding: 1px 3px;
		}
		.iui-treegrid-row-cell-content
		{
			padding: 1px 3px;
		}

		/* Sample settings */
		.control-panel
		{
			width: 170px;
		}
		.feature-content
		{
			width: 850px;
		}
		.feature-list
		{
			width: 300px;
		}
        .directive
        {
        	border: thin solid #cecece;
        	width: 800px;
        	height: 300px;
        }
    </style>
</head>
<body>
	<div class="header">
        <div class="header-content">
		    <h1><span class="product-name">IntegralUI</span> Studio <span class="product-platform">for Web</span></h1>
        </div>
        <hr class="head-separator" />
    </div>
    <div class="content" ng-app="appModule">
        <div class="feature" ng-controller="appCtrl">
	        <h2 class="feature-title">Grids / Data Binding</h2>
	        <div class="feature-content">
                <iui-treegrid name="{{gridName}}" class="directive" columns="sampleColumns" rows="sampleRows" row-icon="defaultIcon" show-footer="false" ></iui-treegrid>
                <br style="clear:both;"/>
                <div class="feature-help">
                    <p><span class="initial-space"></span>In this sample we are using an arbitrary data source to load the content of TreeGrid. In order this to work, you need to match the data fields from your data source to the fields of column and row objects. You can use any custom names for your data, as long as you match those names with object fields, the TreeGrid will be populated.</p>
                    <p><span class="initial-space"></span>For purpose of data binding, we are using the <strong>dataFields</strong> attribute which accepts an object containing all names for the data fields (this property can also be used as parameter in <span class="code-func">loadData</span> method, as it is in this example case). This property allows you to link fields from your data source to the fields of objects in TreeGrid.</p>
                    <p><span class="initial-space"></span>Default settings for this property are:</p>
                    <div class="code-block">
                    	<p class="code-line"><strong>dataFields</strong> = {</p>
	                    <div class="code-obj-block">
                    		<p class="code-line"><span class="code-field">cell</span>: {</p>
		                    <div class="code-obj-block">
				            	<p class="code-line">cid: <span class="code-string">'cid'</span>,</p>
								<p class="code-line">content: <span class="code-string">'content'</span>,</p>
								<p class="code-line">contextMenu: <span class="code-string">'contextMenu'</span>,</p>
								<p class="code-line">enabled: <span class="code-string">'enabled'</span>,</p>
								<p class="code-line">labelEdit: <span class="code-string">'labelEdit'</span>,</p>
								<p class="code-line">style: <span class="code-string">'style'</span>,</p>
				                <p class="code-line">text : <span class="code-string">'text'</span>,</p>
				                <p class="code-line">value: <span class="code-string">'value'</span></p>
			                </div>
				            <p class="code-line">},</p>
				            <p class="code-line"><span class="code-field">column</span>: {</p>
		                    <div class="code-obj-block">
								<p class="code-line">allowDrag: <span class="code-string">'allowDrag'</span>,</p>
								<p class="code-line">allowDrop: <span class="code-string">'allowDrop'</span>,</p>
								<p class="code-line">contentAlignment: <span class="code-string">'contentAlignment'</span>,</p>
								<p class="code-line">contextMenu: <span class="code-string">'contextMenu'</span>,</p>
								<p class="code-line">editorType: <span class="code-string">'editorType'</span>,</p>
								<p class="code-line">editorSettings: <span class="code-string">'editorSettings'</span>,</p>
								<p class="code-line">fixedWidth: <span class="code-string">'fixedWidth'</span>,</p>
								<p class="code-line">footerAlignment: <span class="code-string">'footerAlignment'</span>,</p>
				                <p class="code-line">footerText : <span class="code-string">'footerText'</span>,</p>
								<p class="code-line">headerAlignment: <span class="code-string">'headerAlignment'</span>,</p>
								<p class="code-line">headerContent: <span class="code-string">'headerContent'</span>,</p>
				                <p class="code-line">headerText : <span class="code-string">'headerText'</span>,</p>
				                <p class="code-line">icon: <span class="code-string">'icon'</span>,</p>
				                <p class="code-line">id : <span class="code-string">'id'</span>,</p>
								<p class="code-line">style: <span class="code-string">'style'</span></p>
								<p class="code-line">width: <span class="code-string">'width'</span></p>
			                </div>
				            <p class="code-line">},</p>
				            <p class="code-line"><span class="code-field">row</span>: {</p>
		                    <div class="code-obj-block">
								<p class="code-line">allowDrag: <span class="code-string">'allowDrag'</span>,</p>
								<p class="code-line">allowDrop: <span class="code-string">'allowDrop'</span>,</p>
								<p class="code-line">cells: <span class="code-string">'cells'</span>,</p>
								<p class="code-line">content: <span class="code-string">'content'</span>,</p>
								<p class="code-line">contextMenu: <span class="code-string">'contextMenu'</span>,</p>
				                <p class="code-line">enabled: <span class="code-string">'enabled'</span>,</p>
				                <p class="code-line">expanded: <span class="code-string">'expanded'</span>,</p>
								<p class="code-line">hasChildren: <span class="code-string">'hasChildren'</span>,</p>
				                <p class="code-line">icon: <span class="code-string">'icon'</span>,</p>
				                <p class="code-line">id : <span class="code-string">'id'</span>,</p>
				                <p class="code-line">pid : <span class="code-string">'pid'</span>,</p>
								<p class="code-line">rows: <span class="code-string">'rows'</span>,</p>
				                <p class="code-line">statusIcon: <span class="code-string">'statusIcon'</span>,</p>
								<p class="code-line">style: <span class="code-string">'style'</span></p>
				                <p class="code-line">text : <span class="code-string">'text'</span></p>
			                </div>
				            <p class="code-line">}</p>
		                </div>
				        <p class="code-line">}</p>
	                </div>
					</p>
                    <p style="padding-bottom:25px"><span class="initial-space"></span>For more information check out the source code of this sample.</p>
                </div>
            </div>
        </div>
    </div>
</body>
</html>
